<!DOCTYPE html>
<!--懒得写CSS和一堆JS了，麻烦~-->
<html lang="zh-cmn-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发送弹幕</title>
    <link href="/static/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/jquery/jquery.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
    body {
        padding-top: 50px;
    }

    .starter-template {
        padding: 40px 15px;
        text-align: center;
    }

    .danmu-advanced {
        display: <%=advanced ? "block": "none"%>;
    }

    </style>
</head>

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">弹幕</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="starter-template">
            <form id="form-ret">
                <div class="row">
                    <p class="text-success">发送你的弹幕吧！</p>
                </div>
                <div class="row">
                    <textarea class="form-control" name="text" row="4" id="txt-barrage"></textarea>
                </div>
                <p>&nbsp;</p>
                <div class="row danmu-advanced danmu-style">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">特效</label>
                        <div class="col-sm-8">
                            <label class="radio-inline">
                                <input type="radio" name="style" value="scroll" checked>滚动</label>
                            <label class="radio-inline">
                                <input type="radio" name="style" value="reversescroll">反向滚动</label>
                            <label class="radio-inline">
                                <input type="radio" name="style" value="staticup">固定最上</label>
                            <label class="radio-inline">
                                <input type="radio" name="style" value="staticdown">固定最下</label>
                            <label class="radio-inline danmu-sourceCode">
                                <input type="radio" name="style" value="custom">自定义</label>
                        </div>
                    </div>
                    <p>&nbsp;</p>
                </div>
                <div class="row danmu-advanced danmu-color">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">颜色(16进制)</label>
                        <div class="col-sm-8">
                            <input type="color" name="color" class="form-control" name="txt-color" value="#ffffff" />
                        </div>
                    </div>
                    <p>&nbsp;</p>
                </div>
                <div class="row danmu-advanced danmu-textStyle">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">文字CSS</label>
                        <div class="col-sm-8">
                            <input type="text" name="textStyle" class="form-control" name="txt-style" value="normal bold 3em 微软雅黑" />
                        </div>
                    </div>
                    <p>&nbsp;</p>
                </div>
                <div class="row danmu-advanced danmu-height">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">弹幕高度</label>
                        <div class="col-sm-8">
                            <input type="text" name="height" class="form-control" name="txt-height" value="30" />
                        </div>
                    </div>
                    <p>&nbsp;</p>
                </div>
                <div class="row danmu-advanced danmu-lifeTime">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">显示时间</label>
                        <div class="col-sm-8">
                            <input type="text" name="lifeTime" class="form-control" name="txt-time" value="240" />
                        </div>
                    </div>
                    <p>&nbsp;</p>
                </div>
                <div class="row danmu-advanced">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">高级弹幕密码</label>
                        <div class="col-sm-8">
                            <input type="password" name="password" class="form-control" name="txt-password" value="" />
                        </div>
                    </div>
                    <p>&nbsp;</p>
                </div>
                <div class="row">
                    <button class="form-control btn-success" id="btn-send">喷射</button>
                </div>
                <div class="row">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="saveContent">保留发送内容</label>
                    </div>
                </div>
                <input type="hidden" name="type" value="<%=advanced?'advanced':''%>" />
                <div class="danmu-custom danmu-sourceCode hide">
                <div class="row">
                    <p><label>自定义弹幕</label></p>
                </div>
                <div class="row">
                    <textarea class="form-control" name="sourceCode" row="4" id="txt-custom" placeholder="Enter JavaScript Here.."></textarea>
                </div>
                </div>
                <div class="row">
                    <p>
                        <br/>
                    </p>
                    <p>Powered by zsx</p>
                    <p>若弹幕无法发送，则请刷新。</p>
                    <p>在弹幕上表白、使用不文明语言有被封号的可能。</p>
                </div>
            </form>
        </div>
    </div>
    <script>
    $(function() {
        var roomsConfig = <%-JSON.stringify(permission)%>;
        var room = "<%=room%>";
        var danmuHash = null;

        calculateHash();
        initializeRoomSelector();
        bindSendButton();

        function calculateHash() {
            function b2h(s) {
                var i, l, n, o = '';
                s += '';
                for (i = 0, l = s.length; i < l; i++) {
                    n = s.charCodeAt(i).toString(16);
                    o += n.length < 2 ? '0' + n : n;
                }
                return o;
            }

            // In some modes, localStorage cannot be used.
            try {
                danmuHash = localStorage.getItem("danmuHash");
            } catch (e) {
                danmuHash = "CANNOT_GET_HASH";
                // eat it
            }

            if (danmuHash === null) {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                ctx.textBaseline = "top";
                ctx.font = "14px '微软雅黑'";
                ctx.fillStyle = "#0281cd";
                ctx.fillText("zsx's Danmu Server\n\n弹幕验证帆布指纹", 5, 5);
                ctx.fillText("http://www.zsxsoft.com/", 5, 30);
                var b64 = b2h(atob(canvas.toDataURL().replace("data:image/png;base64,", "")).slice(-32, -24));
                try {
                    localStorage.danmuHash = b64;
                } catch (e) {
                    // Still do nothing
                }
            }
        }

        function initializeRoomSelector() {

            function initializePermissions(room) {
                for (var item in roomsConfig) {
                    if (roomsConfig[item]) {
                        $(".danmu-" + item).show();
                    }
                }
            }
            initializePermissions(room);

            $("input[name='style']").change(function(e) {
                if ($(this).val() == "custom") {
                    $(".danmu-custom").removeClass("hide");
                } else {
                    $(".danmu-custom").addClass("hide");
                }
            });

        }

        function bindSendButton() {

            $("#btn-send").click(function() {
                var ret = {};
                var object = $("#form-ret").serializeArray();
                for (var i = 0; i < object.length; i++) {
                    ret[object[i].name] = object[i].value;
                }
                ret.hash = danmuHash;
                $.post("/post", ret).done(function(data) {
                    alert(data);
                    if (!$("#saveContent")[0].checked) $("#txt-barrage").val("").focus();
                    $("#btn-send").removeAttr('disabled');
                });
                $("#btn-send").attr("disabled", "disabled");
            });
        }
    });
    </script>
</body>

</html>
